<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">超市管理</a>
        </li>
        <li class="active">超市列表</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">超市列表</h4>
            <div class="row">
                <div class="col-sm-2">
                    <a id="addManager" href="#manager-modal" data-toggle="modal"
                       class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加超市
                    </a>
                </div>
                <div class="col-sm-10">
                    <form id="searchForm" class="form-inline pull-right" role="search">

                        <div class="input-group pull-right" >
                            <input id="超市" name="market" class="form-control input-sm" type="text" style="margin-left:10px;height: 34px;width:180px"
                                   placeholder="超市名称"/>
                            <span class="input-group-btn" style="margin-left:10px;">
                                <button id="searchBtn" class="btn btn-xs btn-info" type="button">
                                    <i class="ace-icon fa fa-search"></i> 搜索
                                </button>
					        </span>
                        </div>


                    </form>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">序号</th>
                        <th>超市名称</th>
                        <th>超市地址</th>
                        <!--<th>状态</th>-->
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>


    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog" style="width: 50%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">添加超市</h5>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="name"> 超市名称：</label>
                            <div class="col-sm-9">
                                <div class="clearfix"></div>
                                    <input type="hidden" id="mid" name="id" >
                                    <input type="text" id="name" name="name" class="col-xs-9" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="address"> 超市地址：</label>
                            <div class="col-sm-9">
                                <div class="clearfix"></div>
                                <input type="text" id="address" name="address" class="col-xs-9">
                            </div>
                        </div>

                        <!--<div class="form-group">-->
                            <!--<label class="col-sm-3 control-label no-padding-right"> 状态：</label>-->
                            <!--<div class="col-sm-9">-->
                                <!--<div class="clearfix">-->
                                    <!--<label>-->
                                        <!--<input id="status" name="status" class="ace ace-switch ace-switch-4 btn-flat"-->
                                               <!--type="checkbox" >-->
                                        <!--<span class="lbl"-->
                                              <!--data-lbl="启用 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 禁用"></span>-->
                                    <!--</label>-->
                                    <!--<input name="status" type="hidden">-->
                                <!--</div>-->
                                <!--&lt;!&ndash;<div class="switch" data-on-label="启用" data-off-label="禁用">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<input id="status"  name="status" type="checkbox" checked />&ndash;&gt;-->
                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                            <!--</div>-->
                        <!--</div>-->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo close"></i> 取消
                    </button>
                    <button id="save-manager-btn" type="button" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        var company_table;

        $(function () {


            var initParam =  $("#searchForm").serialize();
            company_table = $('#company-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'market/getAllList?'+initParam,
                },
                fnDrawCallback  : function(){
                            　　this.api().column(0, {
                                  search: 'applied',
                                  order: 'applied'
                              }).nodes().each(function(cell, i) {
                                  cell.innerHTML = i + 1;
                              });
                            },
                columns: [
                    {
                        data: null,
                        targets: 0
                    },

                    {
                        data: 'name',
                        defaultContent: ''
                    },{
                        data: 'address',
                        defaultContent: ''
                    },
//                    {
//                        data: function (row) {
//
//                            return row.status?"启用":"禁用";
//                        }
//                    },
                    {
                        data: 'createTime',
                        defaultContent: ''
                    },
                    {
                        data: function (row) {
                            var edit = '&nbsp;&nbsp;<a  href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-primary edit"><i class="fa fa-pencil"></i> 编辑</a>';
                            var del = '&nbsp;&nbsp;<a  href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger delete"><i class="fa fa-trash"></i> 删除</a>';
                            return edit+del;
                        }
                    }
                ]
            });



            $('#searchBtn').click(function () {
                var param = $("#searchForm").serialize();

                company_table.ajax.url("market/getAllList?" + param).load();
            });


            $("#company-table tbody").on("click", ".edit", function () {
                var id = $(this).data("id");
                $.get("market/editMarket/" + id, function (data) {
                   $("#name").val(data.name);
                   $("#address").val(data.address);
                   $("#mid").val(data.id);
                    $("#status").prop('checked',data.status?false:true);
                   $("#manager-modal").modal('show');
                });
            });

            //删除
            $("#company-table tbody").on("click", ".delete", function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要删除这个超市？", function (f) {
                    if (f) {
                        $.post("market/removeMarket/" + id, function (data) {
                            company_table.ajax.reload();
                        });
                    }})
            });

            //初始化表单校验
            var video_validator = $("#manager-form").validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    name: {
                        required: true
                    },
                    address: {
                        required: true
                    },

                },
                messages: {
                    name: {
                        required: "超市名称不能为空"
                    },
                    address: {
                        required: "超市地址不能为空"
                    },

                }, highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                }, success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                    $(e).remove();
                }, errorPlacement: function (error, element) {
                    if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    } else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else {
                        error.insertAfter(element.parent());
                    }
                }
            });


            $("#save-manager-btn").click(function () {
                if ($("#manager-form").valid()){

                    $("#manager-form").ajaxSubmit({
                        url: 'market/saveMarket',
                        type: 'post',
                        success: function (data) {
                            $("#manager-modal").modal('hide');
                            $("#manager-modal input").val("");
                            company_table.ajax.reload();
                        }
                    });
                }

            });

            //模态框隐藏事件
            $("#manager-modal").on("hide.bs.modal", function () {
                $("#manager-form")[0].reset();
                video_validator.resetForm();
                $("#manager-form .form-group").removeClass("has-error");
            });

            $(".close-button").click(function(){
                $("#manager-modal input").val("");
                $("#statusName").prop("checked",false);
            })

        });
    </script>
</div>